Ember.js Controller

Ember.js Controller হলো একটি গুরুত্বপূর্ণ উপাদান যা অ্যাপ্লিকেশনের ভিউ এবং মডেল ডেটার মধ্যে যোগাযোগ তৈরি করে। এটি Model-View-Controller (MVC) আর্কিটেকচারের একটি অংশ এবং View এবং Model এর মধ্যে ডেটা পরিবহন ও ব্যবস্থাপনা করতে সহায়ক।

Ember.js-এর Controller সাধারণত Route থেকে মডেল ডেটা গ্রহণ করে এবং সেই ডেটাকে View বা Template-এ রেন্ডার করার জন্য প্রস্তুত করে। এটি অ্যাপ্লিকেশন ডেভেলপমেন্টের সময় কন্ট্রোলারের মাধ্যমে অ্যাকশন এবং ইন্টারঅ্যাকশনও পরিচালনা করতে সাহায্য করে।

Ember.js Controller এর ভূমিকা

1. মডেল ডেটার সঙ্গে কাজ: Controller সাধারণত রাউট থেকে ডেটা নিয়ে তা ভিউ (Template) তে পাঠায়।
2. ইন্টারঅ্যাকশন পরিচালনা: কন্ট্রোলার ইউজার ইন্টারঅ্যাকশন যেমন বাটন ক্লিক, ফর্ম সাবমিশন ইত্যাদি হ্যান্ডল করতে ব্যবহৃত হয়।
3. ডেটা ফরম্যাটিং: ডেটার মধ্যে পরিবর্তন, ফিল্টারিং বা অন্যান্য প্রক্রিয়া করতে কন্ট্রোলার ব্যবহার করা হয়।

Ember.js Controller এর কাঠামো

Ember.js-এ কন্ট্রোলার সাধারণত app/controllers/ ফোল্ডারে থাকে এবং এটি @ember/controller থেকে ইনহেরিট করা হয়।

কন্ট্রোলার তৈরি করা

কোনো নতুন কন্ট্রোলার তৈরি করতে Ember CLI ব্যবহার করা হয়:

ember generate controller about

এটি app/controllers/about.js ফাইলটি তৈরি করবে। কন্ট্রোলার ফাইলের সাধারণ কাঠামো হবে এরকম:

// app/controllers/about.js
import Controller from '@ember/controller';

export default class AboutController extends Controller {
  // কন্ট্রোলারের প্রপার্টি এবং অ্যাকশন
  message = 'Welcome to Ember.js!';

  // কন্ট্রোলারের অ্যাকশন
  actions = {
    changeMessage() {
      this.set('message', 'Hello, Ember Developer!');
    }
  };
}

এখানে, কন্ট্রোলারে একটি message প্রপার্টি রয়েছে এবং একটি changeMessage অ্যাকশন আছে, যা ইউজার ইন্টারঅ্যাকশনের মাধ্যমে message প্রপার্টির মান পরিবর্তন করবে।

Controller এর প্রধান বৈশিষ্ট্য

১. অ্যাকশন (Actions)

Ember.js কন্ট্রোলারে actions অবজেক্ট ব্যবহার করে ইউজার ইন্টারঅ্যাকশন বা ইভেন্ট হ্যান্ডলিং পরিচালনা করা হয়। এই অ্যাকশনগুলি টেমপ্লেট থেকে ট্রিগার করা যেতে পারে এবং কন্ট্রোলারে নির্দিষ্ট লজিক চালু করতে ব্যবহৃত হয়।

// app/controllers/contact.js
import Controller from '@ember/controller';

export default class ContactController extends Controller {
  actions: {
    submitForm() {
      alert('Form Submitted!');
    }
  }
}

এখানে submitForm অ্যাকশনটি টেমপ্লেট থেকে কল করা যাবে এবং এটি একটি পপ-আপ আলার্ম দেখাবে।

২. প্রপার্টি (Properties)

কন্ট্রোলারে আপনি সাধারণ JavaScript প্রপার্টি রাখতে পারেন, যা টেমপ্লেটে রেন্ডার করা হয়। সাধারণত মডেল ডেটা বা কাস্টম ডেটা প্রপার্টি হিসেবে এটি ব্যবহৃত হয়।

// app/controllers/index.js
import Controller from '@ember/controller';

export default class IndexController extends Controller {
  welcomeMessage = 'Welcome to the Homepage!';
}

এই welcomeMessage প্রপার্টিটি টেমপ্লেটের মধ্যে ব্যবহার করা যাবে:

<!-- app/templates/index.hbs -->
<h1>{{welcomeMessage}}</h1>

৩. মডেল ডেটা (Model Data)

কন্ট্রোলার রাউট থেকে মডেল ডেটা গ্রহণ করে এবং তা ভিউতে পাঠানোর জন্য এটি ব্যবহৃত হয়। যখন রাউটের মডেল ডেটা লোড হয়, তখন কন্ট্রোলার সেই ডেটা প্রক্রিয়া করে বা কাস্টমাইজ করে ভিউতে পাঠাতে পারে।

// app/controllers/application.js
import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  // মডেল ডেটা কন্ট্রোলারে ব্যবহার
  modelData = this.model;  // রাউটের মডেল ডেটা গ্রহণ
}

Controller এবং Route এর সম্পর্ক

Ember.js-এ, Route এবং Controller এর মধ্যে একটি সম্পর্ক রয়েছে:

1. Route সাধারণত ডেটা বা মডেল লোড করে এবং এটি কন্ট্রোলারকে প্রেরণ করে।
2. Controller সেই ডেটা গ্রহণ করে এবং ভিউ (Template) তে রেন্ডার করার জন্য প্রস্তুত করে।

Route থেকে Controller এ ডেটা পাস করা

// app/routes/about.js
import Route from '@ember/routing/route';

export default class AboutRoute extends Route {
  model() {
    return {
      name: 'Ember.js',
      description: 'A JavaScript framework for building web applications.'
    };
  }
}

এটি model() মেথডের মাধ্যমে মডেল ডেটা রিটার্ন করছে যা কন্ট্রোলারে পাওয়া যাবে।

// app/controllers/about.js
import Controller from '@ember/controller';

export default class AboutController extends Controller {
  modelData = this.model;  // model() থেকে ডেটা নেওয়া
}

Ember.js Controller এবং Model

কন্ট্রোলারের model অ্যাক্সেস করা প্রায়শই দরকার হয়, কারণ আপনি রাউট থেকে model ডেটা গ্রহণ করতে চান। এতে model() মেথডের মাধ্যমে প্রাপ্ত ডেটা কন্ট্রোলারে পাঠানো হয়।

// app/controllers/about.js
import Controller from '@ember/controller';

export default class AboutController extends Controller {
  modelData = this.model;  // মডেল ডেটা টেমপ্লেটের জন্য
}

এভাবে মডেল ডেটা কন্ট্রোলার থেকে টেমপ্লেটের মধ্যে সহজেই রেন্ডার করা যায়।

Ember.js Controller এর ব্যবহার

1. ডেটা ম্যানিপুলেশন: মডেল ডেটা গ্রহণ এবং প্রক্রিয়া করার জন্য কন্ট্রোলার ব্যবহার করা হয়।
2. ইন্টারঅ্যাকশন হ্যান্ডলিং: কন্ট্রোলার অ্যাকশন এবং ইউজার ইন্টারঅ্যাকশনের জন্য ব্যবহৃত হয়।
3. রাউট এবং ভিউ-এর মধ্যে যোগাযোগ: কন্ট্রোলার রাউট থেকে মডেল গ্রহণ করে এবং ভিউতে ডেটা পাঠাতে সহায়ক।

Ember.js-এ কন্ট্রোলার একটি গুরুত্বপূর্ণ উপাদান, যা অ্যাপ্লিকেশনের লজিক এবং ভিউয়ের মধ্যে সেতু তৈরি করে। এটি model ডেটা গ্রহণ, actions পরিচালনা এবং properties ব্যবহারের মাধ্যমে অ্যাপ্লিকেশন ইন্টারঅ্যাকশন সহজ করে তোলে। কন্ট্রোলার অ্যাপ্লিকেশনের কার্যকারিতা এবং ইউজার ইন্টারঅ্যাকশনকে আরো শক্তিশালী ও কার্যকর করে।

Ember.js-এ Controller হল একটি গুরুত্বপূর্ণ উপাদান যা View (UI) এবং Model (ডেটা) এর মধ্যে একটি ব্রিজ হিসেবে কাজ করে। Controller মূলত রাউটের model ডেটাকে প্রক্রিয়া করার এবং UI এর জন্য প্রয়োজনীয় লজিক তৈরি করার জন্য ব্যবহৃত হয়। এটি সাধারণত Controller-এর মাধ্যমে রেন্ডার হওয়া ডেটার স্টেট এবং অ্যাকশনগুলি পরিচালনা করে।

Ember.js-এ Controller একটি ভিউ কন্ট্রোলারের মতো কাজ করে, যেখানে রাউটের মডেল ডেটা কন্ট্রোলারের মাধ্যমে ভিউতে প্রেরণ করা হয় এবং অ্যাপ্লিকেশনের ব্যবহারকারী ইন্টারঅ্যাকশন পরিচালনা করা হয়।

Controller এর প্রধান ভূমিকা

1. ডেটা ও ভিউ-এর মধ্যে সম্পর্ক স্থাপন:
   Controller, মডেল এবং ভিউয়ের মধ্যে একটি সম্পর্ক স্থাপন করে, যেখানে মডেল থেকে প্রাপ্ত ডেটা কন্ট্রোলারের মাধ্যমে টেমপ্লেটে পাঠানো হয়। কন্ট্রোলার model ডেটাকে প্রস্তুত করে, যাতে এটি টেমপ্লেটে সহজে রেন্ডার করা যায়।
2. অ্যাকশন হ্যান্ডলিং:
   Controller ব্যবহারকারীর ইন্টারঅ্যাকশন যেমন button clicks, form submissions ইত্যাদির জন্য অ্যাকশন হ্যান্ডলিং করে। এটি ব্যবহারকারী ইন্টারঅ্যাকশনের ফলস্বরূপ মডেল বা ভিউ পরিবর্তন করতে ব্যবহৃত হয়।
3. ভিউ কাস্টমাইজেশন:
   কন্ট্রোলার ভিউয়ের আচরণ এবং উপস্থিতি কাস্টমাইজ করার জন্য সাহায্য করে, যেমন ব্যবহারকারীর ইনপুট থেকে প্রাপ্ত ডেটা প্রক্রিয়া বা আপডেট করা।
4. স্টেট ম্যানেজমেন্ট:
   কন্ট্রোলার একটি নির্দিষ্ট রাউটের জন্য স্টেট পরিচালনা করতে পারে। এটি ব্যবহারকারী ইন্টারঅ্যাকশনের মাধ্যমে স্টেট আপডেট করতে সাহায্য করে, যেমন কোনো ফর্মের ডাটা সংরক্ষণ করা।

Ember.js Controller এর কাজের প্রক্রিয়া

১. Model ডেটা ব্যবহার

Controller সাধারণত model() মেথড ব্যবহার করে রাউটের মডেল ডেটা প্রস্তুত করে। যখন ব্যবহারকারী একটি রাউটের URL অ্যাক্সেস করে, তখন মডেল ডেটা রিটার্ন করা হয় এবং Controller সেই ডেটাকে UI-তে রেন্ডার করতে ব্যবহৃত করে।

// app/routes/about.js
import Route from '@ember/routing/route';

export default class AboutRoute extends Route {
  model() {
    return {
      title: 'Ember.js',
      description: 'A JavaScript framework for building web applications.'
    };
  }
}

২. Controller-এ মডেল ডেটা ব্যবহৃত হয়

Controller সাধারণত মডেল ডেটাকে ভিউতে পাঠানোর জন্য ব্যবহৃত হয়:

// app/controllers/about.js
import Controller from '@ember/controller';

export default class AboutController extends Controller {
  // Model ডেটা ব্যবহার করা হচ্ছে
  get fullDescription() {
    return `${this.model.title}: ${this.model.description}`;
  }
}

এখানে, কন্ট্রোলার model থেকে ডেটা নিয়ে এবং একটি কাস্টম প্রপার্টি fullDescription তৈরি করছে, যা টেমপ্লেটে ব্যবহৃত হতে পারে।

৩. অ্যাকশন হ্যান্ডলিং

Controller ব্যবহারকারীর ইন্টারঅ্যাকশন, যেমন ফর্ম সাবমিট বা বাটন ক্লিক, পরিচালনা করতে actions অবজেক্ট ব্যবহার করে। এটি ব্যবহারকারী ইন্টারঅ্যাকশনটি মডেল বা ভিউ-তে আপডেট করতে ব্যবহৃত হয়।

// app/controllers/contact.js
import Controller from '@ember/controller';

export default class ContactController extends Controller {
  actions: {
    submitForm() {
      alert('Form Submitted!');
      // এখানে ফর্মের ডেটা প্রক্রিয়া করতে হবে
    }
  }
}

এখানে, submitForm অ্যাকশনটি actions অবজেক্টের মধ্যে সংজ্ঞায়িত করা হয়েছে। ব্যবহারকারী যখন ফর্ম সাবমিট করবে, এটি submitForm অ্যাকশনটি কল করবে এবং নির্দিষ্ট কার্যকলাপ সম্পাদন করবে।

৪. Controller এবং Model ডেটা সিঙ্ক্রোনাইজ করা

Controller এবং মডেল ডেটার মধ্যে সম্পর্ক বজায় রাখা প্রয়োজন। যদি কন্ট্রোলারের কোন অ্যাকশন মডেল ডেটাকে পরিবর্তন করে, তবে সেটা UI-তে রিফ্লেক্ট হবে।

// app/controllers/product.js
import Controller from '@ember/controller';

export default class ProductController extends Controller {
  actions: {
    updatePrice(newPrice) {
      this.model.set('price', newPrice);  // মডেল ডেটা আপডেট
    }
  }
}

এখানে, updatePrice অ্যাকশনটি মডেল ডেটার price প্রপার্টি আপডেট করছে, এবং UI-তে পরিবর্তন দেখা যাবে।

Ember.js Controller এর ব্যবহার কেস

১. ফর্ম হ্যান্ডলিং

Controller একটি ফর্মের ডেটা নিয়ে কাজ করতে পারে। ব্যবহারকারী ফর্মে ডেটা ইনপুট করলে তা কন্ট্রোলারের মাধ্যমে মডেল আপডেট করা হয়।

২. ডেটা প্রসেসিং

কন্ট্রোলার কোনো ডেটা প্রসেস করে, যেমন ফর্মের ইনপুট ডেটা যাচাই করা বা নতুন ডেটা তৈরি করা, এবং তারপর তা মডেলে পাঠায়।

৩. ডাইনামিক UI রেন্ডারিং

Controller ডাইনামিকভাবে UI তৈরি করতে সাহায্য করে। উদাহরণস্বরূপ, কন্ট্রোলার ভিউতে বিভিন্ন ইলিমেন্ট রেন্ডার করতে পারে যা মডেল বা অন্যান্য ইউজারের ইনপুটের উপর ভিত্তি করে পরিবর্তিত হয়।

Ember.js Controller এর সুবিধা

1. UI এবং Model-এর মধ্যে একটি পরিষ্কার বিভাজন: Controller মডেল এবং ভিউয়ের মধ্যে সম্পর্ক তৈরি করে, যাতে UI এবং ডেটা সঠিকভাবে একে অপরের সাথে যোগাযোগ করতে পারে।
2. অ্যাকশন হ্যান্ডলিং: Ember.js Controller ব্যবহারকারীর ইন্টারঅ্যাকশন যেমন বাটন ক্লিক বা ফর্ম সাবমিট হ্যান্ডল করতে ব্যবহৃত হয়।
3. স্টেট ম্যানেজমেন্ট: Controller অ্যাপ্লিকেশনের স্টেট পরিচালনা করে এবং ভিউতে তা উপস্থাপন করে।
4. কাস্টম লজিক: Controller কাস্টম লজিক যেমন ডেটা প্রসেসিং বা ফর্ম ভ্যালিডেশন করতে সহায়ক।

Ember.js-এ Controller হল একটি গুরুত্বপূর্ণ উপাদান যা UI এবং ডেটার মধ্যে যোগাযোগ তৈরি করে। এটি মডেল থেকে ডেটা নিয়ে টেমপ্লেটে পাঠানো এবং ব্যবহারকারী ইন্টারঅ্যাকশনের জন্য অ্যাকশন হ্যান্ডলিং করার কাজ করে। Controller ডেটার স্টেট পরিচালনা এবং UI কাস্টমাইজেশন সহজ করে তোলে, এবং এটি Ember.js অ্যাপ্লিকেশনের কার্যকারিতা ও কার্যক্ষমতা বৃদ্ধি করে।

Ember.js একটি মডেল-ভিউ-কন্ট্রোলার (MVC) আর্কিটেকচার অনুসরণ করে, যেখানে Controller হল অ্যাপ্লিকেশনের ভিউ-লজিককে নিয়ন্ত্রণ করার জন্য ব্যবহৃত একটি গুরুত্বপূর্ণ অংশ। Controller সাধারণত রাউটের সাথে সম্পর্কিত থাকে এবং Model বা ডেটা ধারণ করে এবং টেমপ্লেটের মধ্যে ডেটা উপস্থাপন করতে সহায়তা করে।

Ember.js এ Controller হল একটি সিঙ্গেলটন অবজেক্ট যা রাউটের ডেটা এবং ভিউয়ের মধ্যে যোগাযোগ তৈরি করে।

Controller তৈরি করা

Ember CLI ব্যবহার করে আপনি সহজেই নতুন Controller তৈরি করতে পারেন। এই কমান্ডটি চালান:

ember generate controller about

এটি app/controllers/about.js ফাইল তৈরি করবে, যেখানে about রাউটের জন্য কন্ট্রোলার থাকবে।

১. Controller ফাইলের গঠন

কন্ট্রোলার ফাইল সাধারণত app/controllers/<controller-name>.js ফাইলে থাকে। উদাহরণস্বরূপ, about রাউটের জন্য কন্ট্রোলার দেখতে এরকম হবে:

// app/controllers/about.js
import Controller from '@ember/controller';

export default class AboutController extends Controller {
  // কন্ট্রোলারের প্রপার্টি
  name = 'Ember.js';
  description = 'A JavaScript framework for building web applications.';
}

এখানে, AboutController নামের একটি কন্ট্রোলার তৈরি করা হয়েছে, যেখানে দুটি প্রপার্টি name এবং description আছে, যা টেমপ্লেটে ব্যবহার হবে।

২. Controller এর ব্যবহার

এখন, কন্ট্রোলারটি app/templates/about.hbs টেমপ্লেটে ব্যবহার করা যাবে:

<!-- app/templates/about.hbs -->
<h1>About {{this.name}}</h1>
<p>{{this.description}}</p>

এখানে, name এবং description প্রপার্টি কন্ট্রোলারের মাধ্যমে টেমপ্লেটে রেন্ডার করা হচ্ছে।

Controller এর বৈশিষ্ট্য এবং কার্যকারিতা

১. Model এবং Querying

একটি রাউটের জন্য কন্ট্রোলার সাধারণত model থেকে ডেটা গ্রহণ করে। যদিও Ember.js স্বয়ংক্রিয়ভাবে মডেল ডেটা রাউট থেকে কন্ট্রোলারে অ্যাক্সেস দেয়, আপনি কন্ট্রোলারে model() মেথড ব্যবহার করে তা কাস্টমাইজ করতে পারেন।

// app/controllers/about.js
import Controller from '@ember/controller';

export default class AboutController extends Controller {
  model() {
    return this.store.findAll('product');  // API থেকে ডেটা ফেচ করা
  }
}

২. Actions

Ember.js কন্ট্রোলারে actions সংজ্ঞায়িত করতে সাহায্য করে। অ্যাকশনগুলি সাধারণত ইউজার ইন্টারঅ্যাকশন (যেমন বাটন ক্লিক) এর মাধ্যমে ট্রিগার হয়। কন্ট্রোলারে অ্যাকশনগুলিকে actions অবজেক্টে রাখতে হয়।

// app/controllers/about.js
import Controller from '@ember/controller';

export default class AboutController extends Controller {
  actions: {
    changeDescription(newDescription) {
      this.set('description', newDescription); // description প্রপার্টি আপডেট করা
    }
  }
}

এখন, টেমপ্লেটে একটি অ্যাকশন যুক্ত করতে পারেন:

<!-- app/templates/about.hbs -->
<h1>About {{this.name}}</h1>
<p>{{this.description}}</p>
<button {{on 'click' (fn this.changeDescription 'New Description')}}>Change Description</button>

এখানে, changeDescription অ্যাকশনটি বাটনে ক্লিক করলে description প্রপার্টি আপডেট করবে।

৩. Query Parameters

কন্ট্রোলার সাধারণত URL-এর মাধ্যমে query parameters ব্যবহার করতে পারে। এর মাধ্যমে URL থেকে কন্ট্রোলারে ডেটা পাঠানো যায়।

// app/controllers/application.js
import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  queryParams = ['sort'];

  sort = 'asc'; // ডিফল্ট ভ্যালু

  actions: {
    changeSortOrder(order) {
      this.set('sort', order); // sort প্যারামিটার পরিবর্তন করা
    }
  }
}

এখন, টেমপ্লেটে এই query parameter ব্যবহার করতে পারেন:

<!-- app/templates/application.hbs -->
<p>Sort order: {{this.sort}}</p>
<button {{on 'click' (fn this.changeSortOrder 'desc')}}>Sort Descending</button>

এখানে, sort প্রপার্টিটি URL এর query parameter হিসেবে ব্যবহার করা হবে এবং ইউজার সেটি পরিবর্তন করতে পারবেন।

Controller-এর অন্যান্য কার্যকারিতা

1. অ্যাকশন ফিল্টারিং: কন্ট্রোলার অ্যাকশনগুলিকে পৃথক পৃথকভাবে পরিচালনা করতে পারে এবং নির্দিষ্ট শর্ত অনুযায়ী সেগুলিকে কার্যকর করতে পারে।
2. Model ডেটা সিঙ্ক্রোনাইজেশন: কন্ট্রোলারটি রাউটের মডেল ডেটা সহকারে কাজ করে এবং সেই ডেটা টেমপ্লেটের মধ্যে রেন্ডার করা যায়।
3. Dependency Injection: Ember.js বিভিন্ন সেবা এবং ডিপেনডেন্সি কন্ট্রোলারে ইনজেক্ট করে, যেমন services, controllers, ইত্যাদি।

Controller হল Ember.js অ্যাপ্লিকেশনে ভিউ লজিক এবং রাউট ম্যানেজমেন্টের জন্য অত্যন্ত গুরুত্বপূর্ণ একটি অংশ। এটি model এবং view এর মধ্যে যোগাযোগ স্থাপন করে এবং অ্যাপ্লিকেশনের ডেটা ম্যানেজমেন্টকে সহজ করে তোলে। Actions এবং model এর মাধ্যমে কন্ট্রোলারটি অ্যাপ্লিকেশনের ইউজার ইন্টারঅ্যাকশন এবং ডেটা ম্যানিপুলেশন প্রক্রিয়া পরিচালনা করে।

Ember.js-এ কন্ট্রোলার তৈরি এবং ব্যবহারের প্রক্রিয়া অ্যাপ্লিকেশনকে আরও গতিশীল এবং কার্যকরী করে তোলে।

Ember.js এর Controller হচ্ছে অ্যাপ্লিকেশনের লজিক এবং ভিউয়ের মধ্যে একটি সংযোগস্থল। Controller-এর মধ্যে আপনি properties এবং actions সংজ্ঞায়িত করতে পারেন, যা আপনার অ্যাপ্লিকেশনের ডেটা এবং ইউজার ইন্টারঅ্যাকশনের সাথে সম্পর্কিত। Controller ব্যবহার করে আপনি UI-তে ডেটা পরিবর্তন করতে পারেন এবং ব্যবহারকারীর অ্যাকশনগুলো পরিচালনা করতে পারেন।

এখানে Ember.js-এর Controller এর Actions এবং Properties সম্পর্কে বিস্তারিত আলোচনা করা হলো।

Controller এর ভূমিকা

Controller মূলত Model এবং View এর মধ্যে একটি ব্রিজের কাজ করে। এটি Model থেকে ডেটা নিয়ে View-এ পাঠায় এবং View-এর পরিবর্তন বা ইউজার ইন্টারঅ্যাকশন এর উপর ভিত্তি করে Model পরিবর্তন করতে সাহায্য করে। Controller এ properties (যেমন, ডেটা প্রোপার্টি) এবং actions (যেমন, ইউজার ইন্টারঅ্যাকশনগুলির জন্য) থাকে।

Controller এর Properties

Properties হল সেই ভেরিয়েবল বা ডেটা যা Controller এ সংজ্ঞায়িত থাকে এবং View-এ ডেটা প্রদর্শন করতে ব্যবহৃত হয়। Controller-এর মধ্যে সাধারণত model, computed properties, এবং state properties থাকে।

উদাহরণ:

// app/controllers/about.js
import Controller from '@ember/controller';

export default class AboutController extends Controller {
  // properties
  title = 'Ember.js - A JavaScript Framework';

  // computed property
  get description() {
    return `Welcome to the world of ${this.title}!`;
  }

  // model property
  modelData = this.model; // model থেকে ডেটা এক্সেস করা
}

এখানে:

• title: একটি সাধারণ property যা Ember.js - A JavaScript Framework এর মান ধারণ করছে।
• description: একটি computed property যা title থেকে ডেটা নিয়ে একটি নতুন মান তৈরি করছে।
• modelData: এটি model থেকে ডেটা অ্যাক্সেস করছে এবং UI তে প্রদর্শন করতে প্রস্তুত।

টেমপ্লেটে properties ব্যবহার:

<!-- app/templates/about.hbs -->
<h1>{{this.title}}</h1>
<p>{{this.description}}</p>

এখানে, title এবং description Controller থেকে টেমপ্লেটে রেন্ডার করা হবে।

Controller এর Actions

Actions হলো সেই ফাংশন বা মেথড যা ইউজারের ইন্টারঅ্যাকশনের ভিত্তিতে ট্রিগার হয়। উদাহরণস্বরূপ, একটি বোতাম ক্লিক বা একটি ফর্ম সাবমিট হলে যে ফাংশনটি চালু হবে, তা action হিসেবে কন্ট্রোলারে সংজ্ঞায়িত করা হয়।

উদাহরণ:

// app/controllers/about.js
import Controller from '@ember/controller';

export default class AboutController extends Controller {
  // action
  actions: {
    changeTitle() {
      this.set('title', 'Ember.js - The Modern Web Framework');
    },
    resetTitle() {
      this.set('title', 'Ember.js - A JavaScript Framework');
    }
  }
}

এখানে, changeTitle এবং resetTitle দুটি action। যখন ইউজার কোনো ইন্টারঅ্যাকশন করবে (যেমন একটি বোতাম ক্লিক), তখন এই actions ট্রিগার হবে এবং title এর মান পরিবর্তন হবে।

টেমপ্লেটে actions ব্যবহার:

<!-- app/templates/about.hbs -->
<h1>{{this.title}}</h1>
<button {{on "click" this.changeTitle}}>Change Title</button>
<button {{on "click" this.resetTitle}}>Reset Title</button>

এখানে:

• {{on "click" this.changeTitle}}: এটি বোতাম ক্লিক হলে changeTitle action-টি ট্রিগার করবে এবং title পরিবর্তন হবে।
• {{on "click" this.resetTitle}}: এটি resetTitle action-টি ট্রিগার করবে এবং title মূল মানে ফিরে আসবে।

Controller এর Default Actions

Ember.js এর Controller কিছু ডিফল্ট actions সরবরাহ করে, যেমন:

• model(): যখন রাউট লোড হয়, তখন এটি মডেল ফেচ করতে ব্যবহৃত হয়।
• setupController(): কন্ট্রোলার সেট আপ করার জন্য ব্যবহৃত হয়।
• renderTemplate(): কন্ট্রোলারের ডেটা এবং মডেল রেন্ডার করতে ব্যবহৃত হয়।

Action এবং Properties-এর মধ্যে পার্থক্য

• Properties: এরা সাধারণত ডেটা বা মান সংরক্ষণ করে যা ভিউ-এ রেন্ডার করা হয় এবং যে ডেটা ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে পরিবর্তিত হতে পারে।
• Actions: এইগুলো ফাংশন বা মেথড যেগুলো ইউজারের ইন্টারঅ্যাকশন দ্বারা ট্রিগার হয় এবং সাধারণত ডেটা পরিবর্তন বা অ্যাপ্লিকেশনের অবস্থা পরিবর্তন করতে ব্যবহৃত হয়।

Ember.js Controller এর অন্যান্য বৈশিষ্ট্য

1. Observing Properties: আপনি properties এর পরিবর্তন পর্যবেক্ষণ করতে পারেন। যেমন, কোনো property পরিবর্তিত হলে তা অনুযায়ী অন্য কোনো action বা function ট্রিগার করা।
2. Nested Controllers: Ember.js-এ আপনি নেস্টেড রাউট বা কম্পোনেন্টে কন্ট্রোলার ব্যবহার করতে পারেন, যা একটি অভ্যন্তরীণ কন্ট্রোলার হিসেবে কাজ করে।

Controller Ember.js-এ ভিউ এবং মডেলের মধ্যে একটি সংযোগস্থল হিসেবে কাজ করে। Properties এবং Actions কন্ট্রোলার এ অ্যাপ্লিকেশনের ইউজার ইন্টারঅ্যাকশনের ওপর ভিত্তি করে ডেটা এবং কার্যকলাপ নিয়ন্ত্রণ করতে ব্যবহৃত হয়। কন্ট্রোলার ব্যবহার করে আপনি অ্যাপ্লিকেশনের অবস্থা পরিবর্তন করতে পারেন এবং ইউজারের ইন্টারঅ্যাকশন অনুযায়ী ভিউ আপডেট করতে পারেন।

Query Parameters হল URL-এর অংশ যা ক্লায়েন্ট থেকে সার্ভারে ডেটা প্রেরণের জন্য ব্যবহৃত হয়। Ember.js এ, আপনি Query Parameters এর মাধ্যমে অ্যাপ্লিকেশন রাউটের মধ্যে ডেটা পাস করতে পারেন, যা URL থেকে ডেটা রিট্রিভ করতে এবং অ্যাপ্লিকেশনের মধ্যে পারামিটারভিত্তিক নেভিগেশন করতে সাহায্য করে।

Query Parameters সাধারণত URL-এর শেষে ?key=value ফরম্যাটে থাকে এবং একাধিক প্যারামিটার একে অপরকে & চিহ্ন দ্বারা পৃথক করা হয়। Ember.js রাউটিং সিস্টেমে, Query Parameters ব্যবহার করে রাউটের মধ্যে ডেটা পাস করার জন্য একটি সরল এবং কার্যকরী পদ্ধতি উপলব্ধ।

Query Parameters এর মাধ্যমে ডেটা পাস করা

Ember.js এ Query Parameters পাস করার জন্য প্রথমে রাউটের কনফিগারেশন করতে হয় এবং তারপর সেই প্যারামিটারগুলো কন্ট্রোলার বা মডেল লেয়ার থেকে অ্যাক্সেস করা হয়। এখানে একটি সহজ উদাহরণ দেখানো হলো কিভাবে আপনি Query Parameters এর মাধ্যমে ডেটা পাস করতে পারেন।

১. Router এ Query Parameter কনফিগার করা

প্রথমে, আপনাকে Router এ Query Parameters কনফিগার করতে হবে, যা URL থেকে ডেটা গ্রহণ করবে। উদাহরণস্বরূপ, ধরুন আমাদের একটি products রাউট রয়েছে, যেখানে আমরা category নামক একটি query parameter পাস করতে চাই।

app/router.js:

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('products', { path: '/products' });
});

export default Router;

এখানে, products রাউটকে URL /products এ সংজ্ঞায়িত করা হয়েছে।

২. Route-এ Query Parameter গ্রহণ করা

এখন, আপনাকে Route-এ Query Parameters গ্রহণ করতে হবে। এর জন্য queryParams প্রপার্টি ব্যবহার করা হয়। যখনই query parameter পরিবর্তিত হয়, তখন model hook বা setupController-এ তা অ্যাক্সেস করা যায়।

app/routes/products.js:

import Route from '@ember/routing/route';

export default class ProductsRoute extends Route {
  queryParams = {
    category: {
      refreshModel: true
    }
  };

  model(params) {
    // 'category' query parameter গ্রহন করা হয়েছে
    console.log('Category:', params.category);
    // এখানে আপনার ডেটা ফেচিং লজিক রাখুন
    return { category: params.category };
  }
}

এখানে, queryParams প্রপার্টি দ্বারা category প্যারামিটারটি গ্রহণ করা হয়েছে। refreshModel: true মানে হল যে যখনই category পরিবর্তিত হবে, তখন মডেল পুনরায় লোড হবে।

৩. Controller এ Query Parameter ব্যবহার

এখন, আপনি Controller-এ প্যারামিটারটি ব্যবহার করতে পারেন। এটি আপনি ব্যবহারকারী ইন্টারফেসে ডেটা প্রদর্শন করতে বা কোনো ফিল্টারিং লজিক তৈরি করতে ব্যবহার করতে পারেন।

app/controllers/products.js:

import Controller from '@ember/controller';

export default class ProductsController extends Controller {
  queryParams = ['category']; // Query parameter অ্যাক্সেস করা

  category = null;  // Default value

  // অন্যান্য কন্ট্রোলার লজিক এখানে যোগ করা যেতে পারে
}

এখানে, category প্যারামিটারটি কন্ট্রোলারে অ্যাক্সেস করা হয়েছে, যা UI বা ফিল্টারিং উদ্দেশ্যে ব্যবহৃত হতে পারে।

৪. Query Parameter সহ URL তৈরি করা

এখন, আপনাকে একটি লিঙ্ক তৈরি করতে হবে যেখানে category প্যারামিটারটি URL-এ যুক্ত হবে। Ember.js এর LinkTo কম্পোনেন্ট ব্যবহার করে আপনি query parameters সহ URL তৈরি করতে পারেন।

app/templates/products.hbs:

<h1>Products</h1>

<!-- Category ফিল্টার -->
<button {{action 'filterByCategory' 'electronics'}}>Electronics</button>
<button {{action 'filterByCategory' 'fashion'}}>Fashion</button>

<ul>
  {{#each model as |product|}}
    <li>{{product.name}}</li>
  {{/each}}
</ul>

এখানে, দুটি বাটন রয়েছে যা filterByCategory অ্যাকশনটিকে কল করে। আপনি action ব্যবহার করে category প্যারামিটারটি পরিবর্তন করতে পারেন।

app/controllers/products.js (অ্যাকশন):

import Controller from '@ember/controller';

export default class ProductsController extends Controller {
  queryParams = ['category'];
  category = null;

  actions: {
    filterByCategory(category) {
      this.set('category', category);
      // URL এ category প্যারামিটার যুক্ত হবে
      this.transitionToRoute({ queryParams: { category: category } });
    }
  }
}

এখানে, filterByCategory অ্যাকশন category প্যারামিটারটি সেট করে এবং transitionToRoute ব্যবহার করে নতুন URL-এ প্যারামিটার সহ রাউটের জন্য নেভিগেট করে।

৫. Query Parameter পরিবর্তন এবং রিফ্রেশ

যখনই category পরিবর্তিত হবে, model hook বা setupController পুনরায় কল হবে। এটি আপনাকে queryParams এর মাধ্যমে ডেটা ফেচিং এবং নেভিগেশনকে আরও গতিশীল এবং ইন্টারঅ্যাক্টিভ করতে সাহায্য করে।

Ember.js এ Query Parameters ব্যবহার করে URL-এর মাধ্যমে ডেটা পাস করা একটি শক্তিশালী বৈশিষ্ট্য যা আপনাকে বিভিন্ন ভিউ বা কম্পোনেন্টের মধ্যে ডেটা শেয়ার করতে এবং URL-এ ডেটা প্রদর্শন করতে সাহায্য করে। queryParams এবং transitionToRoute ব্যবহার করে আপনি সহজেই পারামিটার পাস করতে এবং অ্যাপ্লিকেশনের আচরণ কাস্টমাইজ করতে পারেন।

Computed Properties হল Ember.js-এর একটি শক্তিশালী বৈশিষ্ট্য যা আপনার মডেল বা কন্ট্রোলার থেকে ডেটার উপর ভিত্তি করে অটোমেটিক্যালি একটি নতুন মান তৈরি করতে সহায়ক। এটি বিশেষভাবে ব্যবহার করা হয় যখন ডেটা বা ভিউতে কিছু পরিবর্তন করতে হয়, তবে সেগুলির জন্য নতুন মান গণনা করা প্রয়োজন।

Computed Properties কী?

Ember.js-এ Computed Properties এমন প্রপার্টি যা নির্দিষ্ট অন্য প্রপার্টি বা ডেটার উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে মান গণনা করে। এটি আপনাকে ডেটা ম্যানিপুলেশন সহজ এবং আরও কার্যকরভাবে করতে সাহায্য করে।

Computed Property যখনই নির্ভরশীল ডেটার মান পরিবর্তন হয়, তখন তা আপনার কম্পিউটেড প্রপার্টি কে আপডেট করে। এটি একটি গুরুত্বপূর্ণ ফিচার কারণ আপনি নির্দিষ্ট ভ্যালুতে পরিবর্তন ছাড়াই এটি রাখতে পারেন এবং অ্যাপ্লিকেশন আরো দক্ষভাবে চলবে।

Ember.js-এ Computed Property ব্যবহার

Ember.js-এ @computed ডেকোরেটর ব্যবহার করে আপনি কম্পিউটেড প্রপার্টি তৈরি করতে পারেন। আপনি যে প্রপার্টি বা ডেটার উপর নির্ভরশীলতার ভিত্তিতে কম্পিউটেড প্রপার্টি তৈরি করবেন, সেইগুলিকে @computed ট্যাগের মাধ্যমে সংজ্ঞায়িত করা হয়।

Computed Property এর উদাহরণ

ধরা যাক, আমাদের কাছে একটি মডেল রয়েছে যেখানে একজন ব্যক্তির প্রথম নাম এবং শেষ নাম রয়েছে, এবং আমরা তাদের পূর্ণ নাম একটি কম্পিউটেড প্রপার্টির মাধ্যমে গণনা করতে চাই।

১. Model Example

// app/models/person.js
import Model, { attr } from '@ember-data/model';
import { computed } from '@ember/object';

export default class PersonModel extends Model {
  @attr('string') firstName;
  @attr('string') lastName;

  @computed('firstName', 'lastName')
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

এখানে @computed ডেকোরেটর ব্যবহার করে fullName নামক একটি কম্পিউটেড প্রপার্টি তৈরি করা হয়েছে, যা firstName এবং lastName প্রপার্টির উপর নির্ভরশীল। যখন firstName বা lastName পরিবর্তিত হবে, তখন fullName স্বয়ংক্রিয়ভাবে আপডেট হবে।

২. Controller Example

// app/controllers/application.js
import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  firstName = 'John';
  lastName = 'Doe';

  @action
  changeName() {
    this.firstName = 'Jane';
    this.lastName = 'Smith';
  }
}

এখানে আমরা firstName এবং lastName দুটি প্রপার্টি সেট করেছি, এবং changeName অ্যাকশনটি ব্যবহার করে তাদের মান পরিবর্তন করতে পারি।

৩. Template Example

<!-- app/templates/application.hbs -->
<h1>Full Name: {{fullName}}</h1>
<button {{on "click" this.changeName}}>Change Name</button>

এখানে, টেমপ্লেটে fullName কম্পিউটেড প্রপার্টি ব্যবহার করা হয়েছে। যখন firstName বা lastName পরিবর্তিত হবে, তখন fullName স্বয়ংক্রিয়ভাবে আপডেট হয়ে টেমপ্লেটে প্রদর্শিত হবে।

Computed Properties-এর অন্যান্য ব্যবহার

১. Conditional Computed Property

আপনি যখন একটি প্রপার্টির মান নির্ভরশীল করবেন, তখন আপনি @computed ডেকোরেটরের মধ্যে কিছু কন্ডিশনাল লজিক যোগ করতে পারেন। উদাহরণস্বরূপ, ধরুন আমরা একটি কম্পিউটেড প্রপার্টি তৈরি করতে চাই যা যাচাই করবে যদি ব্যবহারকারীর বয়স 18 বছরের বেশি হয়।

// app/models/user.js
import Model, { attr } from '@ember-data/model';
import { computed } from '@ember/object';

export default class UserModel extends Model {
  @attr('number') age;

  @computed('age')
  get isAdult() {
    return this.age >= 18;
  }
}

এখানে isAdult কম্পিউটেড প্রপার্টি age এর উপর ভিত্তি করে তৈরি করা হয়েছে এবং এটি যাচাই করবে যে ব্যবহারকারীর বয়স ১৮ বছরের বেশি কি না।

২. Complex Computed Properties

আপনি একাধিক প্রপার্টি থেকে একটি নতুন মান তৈরি করতে পারেন এবং সেই মানকে @computed ডেকোরেটরের মাধ্যমে নির্ধারণ করতে পারেন।

// app/models/product.js
import Model, { attr } from '@ember-data/model';
import { computed } from '@ember/object';

export default class ProductModel extends Model {
  @attr('number') price;
  @attr('number') discount;

  @computed('price', 'discount')
  get discountedPrice() {
    return this.price - (this.price * (this.discount / 100));
  }
}

এখানে discountedPrice কম্পিউটেড প্রপার্টি price এবং discount এর উপর ভিত্তি করে ডিসকাউন্টেড প্রাইস গণনা করছে।

Computed Properties এর সুবিধা

1. স্বয়ংক্রিয় আপডেট: যদি আপনার অ্যাপ্লিকেশনে একটি প্রপার্টি পরিবর্তিত হয়, তবে কম্পিউটেড প্রপার্টি স্বয়ংক্রিয়ভাবে আপডেট হয়ে যাবে।
2. ডেটা ম্যানিপুলেশন সহজ: কম্পিউটেড প্রপার্টি ব্যবহার করে আপনি সহজেই ডেটা ম্যানিপুলেশন করতে পারবেন, যেমন যোগ, বিয়োগ, গুন, ভাগ ইত্যাদি।
3. ভিউ এবং লজিকের বিচ্ছিন্নতা: কম্পিউটেড প্রপার্টি লজিক এবং ভিউয়ের মধ্যে সঠিক বিচ্ছিন্নতা বজায় রাখে, যা কোডকে আরও পরিষ্কার এবং মেইনটেইনযোগ্য করে তোলে।

Computed Properties Ember.js-এ ডেটা ম্যানিপুলেশনের জন্য একটি শক্তিশালী উপাদান। এটি আপনাকে সহজে প্রপার্টির মান গণনা এবং স্বয়ংক্রিয়ভাবে আপডেট করার সুযোগ দেয়, যা আপনার অ্যাপ্লিকেশনকে আরো দক্ষ এবং সুষ্ঠু করে তোলে। আপনি যখনই নির্দিষ্ট ডেটার উপর ভিত্তি করে কোন মান গণনা করতে চান, তখন Computed Properties খুবই উপকারী।